<template>
  <div class="data-course">
    <el-row>
      <el-col :span="6">
        <div class="data-course-radio">
          <el-radio-group v-model="radio">
            <el-radio-button label>全部</el-radio-button>
            <el-radio-button label="audit">待审核</el-radio-button>
            <el-radio-button label="passed">已通过</el-radio-button>
            <el-radio-button label="noPassed">未通过</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <el-col :span="12" style="margin-top:-16px;">
        <div class="data-course-filter">
          <span style="margin-bottom:20px;">申请时间：</span>
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="|"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleFilter"
          />
        </div>
      </el-col>
    </el-row>
    <div class="data-course-filter">
      <div style="margin-top:20px;">
        <span>关键词</span>
        <el-select v-model="indentity" style="width:165px;" @change="handleFilter">
          <el-option
            v-for="item in indentitys"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="content" style="width:200px" placeholder="请输入搜索内容" />
        <el-button type="primary" style="margin-left:10px;" plain @click="handleFilter">搜索</el-button>
        <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        <el-button :loading="downloadLoading" type="primary" plain @click="handleExport">导出</el-button>
        <el-button type="primary" class="accountBtn" @click="showAccount">财务结算</el-button>
      </div>
    </div>
    <el-divider content-position="left">未通过申请{{ total }}条，金额共计 {{ amount }} 元</el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="username" label="提现单号" min-width="10" align="center" />
      <el-table-column prop="customer" label="代理商账号" min-width="10" align="center" />
      <el-table-column prop="createTime" label="机构/个人名称" min-width="10" align="center" />
      <el-table-column prop="indentPrice" label="联系手机" min-width="10" align="center" />
      <el-table-column prop="indentStatus" label="提现额" min-width="10" align="center" />
      <el-table-column prop="account" label="申请时间" min-width="10" align="center" />
      <el-table-column prop="proportion" label="审核时间" min-width="10" align="center" />
      <el-table-column prop="money" label="审核状态" min-width="10" align="center" />
      <el-table-column prop="manage" label="操作" min-width="10" align="center" />
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog :visible.sync="accountDialog" title="财务结算" width="50%">
      <div>
        <span>财务订单：</span>
        <span>131231532151</span>
      </div>
      <div style="margin:20px 0;">
        <span>查询日期：</span>
        <el-date-picker v-model="accountDate" type="month" placeholder="选择月" />
      </div>
      <el-table :data="accountTableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="accountDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getCashManageList, updateBillRecord, getSettleAccount, addWithdrawalRecord } from '@/api/distribution/agencyCashManage'
import { getTenantId, getUserName } from '@/utils/auth'
export default {
  components: {
    Pagination
  },
  filters: {
    statusFilter(item) {
      const statusMap = {
        'audit': '待审核',
        'passed': '已通过',
        'noPassed': '未通过'
      }
      return statusMap[item]
    }
  },
  data() {
    return {
      total: 0,
      currentpage: 1,
      pagesize: 10,
      amount: 0,
      downloadLoading: false,
      accountDialog: false,
      content: '',
      radio: '',
      indentity: '',
      date: '',
      accountDate: '',
      accountTableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      indentitys: [
        {
          label: '提现单号',
          value: 'billNum'
        },
        {
          label: '机构/个人名称',
          value: 'distributorName'
        },
        {
          label: '联系手机',
          value: 'phone'
        }
      ],
      tableData: [],
      filterData: [],
      selectTime: '',
      accountForm: {
        accountTableData: []
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getCashManageList(getTenantId()).then(res => {
        this.tableData = res.data.items
        this.filterData = res.data.items
        this.total = res.data.items.length
      })
    },
    handleFilter() {
      this.tableData = this.filterData.filter(item => {
        if (this.radio && item.status !== this.radio) return false
        if (this.date && (new Date(item.createTime) < this.date[0] || new Date(item.createTime) > this.date[1])) return false
        if (this.indentity === 'billNum' && item.billNum.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        if (this.indentity === 'distributorName' && item.distributorName.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        if (this.indentity === 'phone' && item.phone.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        return true
      })
      this.total = this.tableData.length
    },
    clearParams() {
      this.date = []
      this.radio = ''
      this.indentity = ''
      this.content = ''
      this.getData()
    },
    handleExport() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['提现单号', '机构/个人名称', '手机号', '提现额', '申请时间', '审核时间', '审核状态']
        const filterVal = ['billNum', 'distributorName', 'phone', 'price', 'createTimeStr', 'examineTimeStr', 'status']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'examineList',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    viewDetail(row) {

    },
    updateBillRecord(row, val) {
      let content = ''
      if (val === 'passed') {
        content = '审核通过'
      } else {
        content = '审核驳回'
      }
      const form = Object.assign({}, row)
      form.status = val
      this.$confirm(content, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateBillRecord(form).then(res => {
          this.getData()
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        })
      })
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    showAccount() {
      this.accountDialog = true
    }

  }
}
</script>

<style lang="scss" scoped>
.data-course {
  padding: 20px;
  &-filter,
  &-keyword {
    width: 100%;
    font-size: 14px;
    color: #606266;
    margin: 15px 0;
    span {
      margin: 10px 0;
    }
    .keyword {
      display: inline-block;
      width: 56px;
      text-align: right;
    }
  }
  .accountBtn {
    float: right;
  }
}
</style>
